<template>
  <div id="app">
    <Topbar :key="topbarkey"></Topbar>
    <Header></Header>
    <router-view @updateKey='updateKeyFn'/>
    <div>vuex:{{isShowLoginModal}}</div>
    <div class="iconfont icon-toast_chenggong"></div>
    <Footer></Footer>
    <Login v-show="isShowLoginModal"></Login>
     <transition name="slide">
    <Toast v-show="isShowToast"></Toast>
    </transition>
    
  </div>
</template>
<script>
import Topbar from './components/Topbar.vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import Login from './components/Login.vue'
import Toast from './components/Toast.vue'
import {JingPinAPI,ReMenAPI} from '@/request/api'
import {mapState} from 'vuex'
export default {
  data () {
    return {
    topbarkey:0,  
    }
  },
  methods: {
    updateKeyFn(){
      this.topbarkey++
    }
  },
  components: {
    Topbar,
    Header,
    Footer,
    Login,
    Toast
  },
 async created () {
   console.log('环境变量为:',process.env.VUE_APP_BASE_URL);
   console.log('获取环境变量的值为:',process.env.VUE_APP_MYNAME);
// 问题1：如果有多个组件涉及到请求，每个组件的请求的服务器地址都是一样的。
//               一旦服务器地址发生变更，有多少个组件有请求，就需要改多少个地方。 
//               解决方案： 使用创建axios实例方式，设置请求域名地址。 
//               src下创建request文件夹，再创建request.js (对axios进行封装)  

//        问题2：多个组件都会有不同的请求，组件中包含着对应请求的地址。
//               如果接口地址发生变化，需要找到对应的组件进行修改。
//               想知道当前这个项目访问了后端哪些接口？ 搜索逐个统计。
//               优化方案：统一管理接口地址。request文件夹下创建 api.js 

//        问题3： 如果项目中请求必须是先A再B再C ，可能会出现回调地狱的问题。
//               优化方案： 使用async+await     
//               async+await 异步的解决方案之一，可以使得异步代码同步化。 
//               await等待promise，resolve结果
//               await关键字需要在async修饰的函数内。


    console.log('请求数据');
    // axios
    // .get('http://kumanxuan1.f3322.net:8881/cms/products/recommend')
    // .then((res)=>{
    //   console.log('请求结果为:',res);
    // })
    // axios.get('/products/recommend').then((res)=>{
    //   console.log('请求结果为',res);
    // })
    //  JingPinAPI().then((res) => {
    //   console.log("1:", res);
    // });
    // console.log("2:");
    // ReMenAPI().then((res) => {
    //   console.log("3：", res);
    // });
    // console.log("4:");  

    // let res =await JingPinAPI();
    // console.log('1',res);
    // console.log('2');
    // let res2=await ReMenAPI()
    // console.log('3',res2);
    // console.log('4');

  },
  computed:{
    ...mapState({
      isShowLoginModal:(state)=>state.showModal.isShowLoginModal,
      isShowToast:state=>state.showToast.isShowToast
    })
  },
  // 解决bug 
// 1可能会出现一个bug，刷新时，也会触发一次watch ，导致一共触发两次topbar的created钩子
// 现象:扫码时有两次登录请求。

  watch:{
    "$route.path":{
      handler(newVal,oldVal){
        console.log('地址变化了');
        if(oldVal !='/'){
          // 如果旧地址为/ 不需要进行重载
          this.topbarkey++;
        }
      }
    }
  }
}
</script>
<style lang="less">
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity .3s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
</style>
